﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListStudent.aspx.cs" Inherits="WEB.APP.Modules.List.ListStudent" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/Controls/List/StudentForm.ascx" TagName="WindowEditor" TagPrefix="uc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        var renderSex = function (value, idxclomn, record) {
            return value == true ? 'Male' : 'Female';
        }

        function KeyEnterFind(f, e) {
            if (e.getKey() === e.ENTER) {
                applyFilter();
                return false;
            }
            return true;
        }
    </script>
    <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript">
            var gr = function(){
                #{grdMain}.reload();
            };
            var applyFilter = function () {                
                var store = #{storeMain};
                store.suspendEvents();
                store.filterBy(getRecordFilter());
                store.resumeEvents();
                #{grdMain}.getView().refresh(false);
                #{paddingBar}.changePage(0);
            };
            var clearFilter = function () {
                #{nfStudentId}.reset();
                #{txtLocationId}.reset();
                #{cboSex}.reset();
                #{dfBirthDt}.reset();
                #{txtHomeLang}.reset();
                #{txtSurName}.reset();
                #{txtGivenName}.reset();
                #{nfCourseId}.reset();
                #{txtCourseTitle}.reset();
                #{nfComYr}.reset();
                #{nfUaiYr}.reset();
                #{nfUai}.reset();
                #{nfGpa}.reset();
                #{nfCreditPass}.reset();
                #{txtEmailAddr}.reset();
                #{txtAddr1}.reset();
                #{txtAddr2}.reset();
                #{txtAddr3}.reset();
                #{txtAddr4}.reset();
                #{txtAddr5}.reset();
                #{txtHomePhone}.reset();
                #{txtWorkPhone}.reset();
                #{txtMobile}.reset();
                #{nfAustPostcode}.reset();
                #{txtCitizenship}.reset();
                #{txtCitizenshipStatus}.reset();
                #{nfProjectId}.reset();

                #{storeMain}.clearFilter();
            }
 
            var filterString = function (value, dataIndex, record) {
                var val = record.get(dataIndex);
                if (typeof val != "string") {
                    return value.length == 0;
                }
                return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
            };
 
            var filterDate = function (value, dataIndex, record) {
                var val = record.get(dataIndex).clearTime(true).getTime();
                
                if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
                    return false;
                }
                return true;
            };
 
            var filterNumber = function (value, dataIndex, record) {
                var val = record.get(dataIndex);
                if (Ext.isEmpty(value, false) || val.toString().toLowerCase().indexOf(value.toString().toLowerCase()) > -1) {
                    return true;
                }
                return false;
            };

            var filterSex = function (value, dataIndex, record) {
                var val = record.get(dataIndex);
                if (value == 'None' || value == val.toString()) {
                    return true;
                }
                return false;
            };
 
            var getRecordFilter = function () {
                var f = [];
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfStudentId}.getValue(), "StudentId", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtLocationId}.getValue(), "LocationId", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterSex(#{cboSex}.getValue(), "Sex", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterDate(#{dfBirthDt}.getValue(), "BirthDt", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtHomeLang}.getValue(), "HomeLang", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtSurName}.getValue(), "SurName", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtGivenName}.getValue(), "GivenName", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfCourseId}.getValue(), "CourseId", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtCourseTitle}.getValue(), "CourseTitle", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfComYr}.getValue(), "ComYr", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfUaiYr}.getValue(), "UaiYr", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfUai}.getValue(), "Uai", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfGpa}.getValue(), "Gpa", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfCreditPass}.getValue(), "CreditPass", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtEmailAddr}.getValue(), "EmailAddr", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtAddr1}.getValue(), "Addr1", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtAddr2}.getValue(), "Addr2", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtAddr3}.getValue(), "Addr3", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtAddr4}.getValue(), "Addr4", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtAddr5}.getValue(), "Addr5", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtHomePhone}.getValue(), "HomePhone", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtWorkPhone}.getValue(), "WorkPhone", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtMobile}.getValue(), "Mobile", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfAustPostcode}.getValue(), "AustPostcode", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtCitizenship}.getValue(), "Citizenship", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterString(#{txtCitizenshipStatus}.getValue(), "CitizenshipStatus", record);
                    }
                });
                f.push({
                    filter: function (record) {                         
                        return filterNumber(#{nfProjectId}.getValue(), "ProjectId", record);
                    }
                });
                var len = f.length;                 
                return function (record) {
                    for (var i = 0; i < len; i++) {
                        if (!f[i].filter(record)) {
                            return false;
                        }
                    }
                    return true;
                };
            };
        </script>
    </ext:XScript>
</head>
<body>
    <form id="form1" runat="server">
    <ext:Hidden runat="server" ID="hfIsEdit" />
    <ext:Hidden runat="server" ID="hfIsDelete" />
    <ext:Hidden runat="server" ID="hdScreenDetailID" Text="1" />
    <ext:Hidden runat="server" ID="hdScreenImportID" Text="0" />
    <ext:Store ID="storeMain" runat="server" OnRefreshData="storeMain_OnRefreshData">
        <Reader>
            <ext:JsonReader IDProperty="StudentId">
                <Fields>
                    <ext:RecordField Name="StudentId" />
                    <ext:RecordField Name="LocationId" />
                    <ext:RecordField Name="Sex" />
                    <ext:RecordField Name="BirthDt" Type="Date" />
                    <ext:RecordField Name="HomeLang" />
                    <ext:RecordField Name="SurName" />
                    <ext:RecordField Name="GivenName" />
                    <ext:RecordField Name="CourseId" />
                    <ext:RecordField Name="CourseTitle" />
                    <ext:RecordField Name="ComYr" />
                    <ext:RecordField Name="UaiYr" />
                    <ext:RecordField Name="Uai" />
                    <ext:RecordField Name="Gpa" />
                    <ext:RecordField Name="CreditPass" />
                    <ext:RecordField Name="EmailAddr" />
                    <ext:RecordField Name="Addr1" />
                    <ext:RecordField Name="Addr2" />
                    <ext:RecordField Name="Addr3" />
                    <ext:RecordField Name="Addr4" />
                    <ext:RecordField Name="Addr5" />
                    <ext:RecordField Name="HomePhone" />
                    <ext:RecordField Name="WorkPhone" />
                    <ext:RecordField Name="Mobile" />
                    <ext:RecordField Name="AustPostcode" />
                    <ext:RecordField Name="Citizenship" />
                    <ext:RecordField Name="CitizenshipStatus" />
                    <ext:RecordField Name="ProjectId" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Viewport ID="Viewport1" runat="server" Layout="border">
        <Items>
            <ext:GridPanel ID="grdMain" runat="server" StripeRows="true" Border="false" Region="Center"
                StoreID="storeMain">
                <TopBar>
                    <ext:Toolbar ID="tbMain" runat="server">
                        <Items>
                            <ext:ToolbarSpacer />
                            <ext:Button ID="btnAdd" runat="server" Text="New" Icon="TableAdd">
                                <DirectEvents>
                                    <Click OnEvent="btnAdd_Click" />
                                </DirectEvents>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnImport" runat="server" Text="Import" FormBind="true" Icon="Build">
                                <Listeners>
                                    <Click Handler="AddTapDocument(hdScreenImportID.getValue(), '0');" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarFill />
                            <ext:Button ID="btnApplyfilter" runat="server" Icon="Find">
                                <ToolTips>
                                    <ext:ToolTip ID="ToolTip1" runat="server" Html="Apply filter" />
                                </ToolTips>
                                <Listeners>
                                    <Click Handler="applyFilter();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnClearFilter" runat="server" Icon="Cancel">
                                <ToolTips>
                                    <ext:ToolTip ID="ToolTip2" runat="server" Html="Clear filter" />
                                </ToolTips>
                                <Listeners>
                                    <Click Handler="clearFilter(null);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn Width="50" Locked="true" />
                        <ext:Column ColumnID="StudentId" DataIndex="StudentId" Header="Person Id" Width="70"
                            Align="Right" Locked="true">
                        </ext:Column>
                        <ext:Column ColumnID="ProjectId" DataIndex="ProjectId" Header="Project Id" Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="LocationId" DataIndex="LocationId" Header="Location Cd" Width="70">
                        </ext:Column>
                        <ext:Column ColumnID="Sex" DataIndex="Sex" Header="Sex" Width="70">
                            <Renderer Fn="renderSex" />
                        </ext:Column>
                        <ext:DateColumn ColumnID="BirthDt" DataIndex="BirthDt" Header="Birth Dt" Format="MM/dd/yyyy"
                            Width="80">
                        </ext:DateColumn>
                        <ext:Column ColumnID="HomeLang" DataIndex="HomeLang" Header="Home Language" Width="100">
                        </ext:Column>
                        <ext:Column ColumnID="SurName" DataIndex="SurName" Header="Surname" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="GivenName" DataIndex="GivenName" Header="Given Names" Width="100">
                        </ext:Column>
                        <ext:Column ColumnID="CourseId" DataIndex="CourseId" Header="Course Cd" Width="80"
                            Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="CourseTitle" DataIndex="CourseTitle" Header="Course Title"
                            Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="ComYr" DataIndex="ComYr" Header="Commencement Yr" Width="110"
                            Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="UaiYr" DataIndex="UaiYr" Header="Uai Yr" Width="40" Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="Uai" DataIndex="Uai" Header="Uai" Width="40" Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="Gpa" DataIndex="Gpa" Header="Gpa" Width="30" Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="CreditPass" DataIndex="CreditPass" Header="Credit Pts Passed"
                            Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="EmailAddr" DataIndex="EmailAddr" Header="Email Addr" Width="170">
                        </ext:Column>
                        <ext:Column ColumnID="Addr1" DataIndex="Addr1" Header="Addr Line 1" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="Addr2" DataIndex="Addr2" Header="Addr Line 2" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="Addr3" DataIndex="Addr3" Header="Addr Line 3" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="Addr4" DataIndex="Addr4" Header="Addr Line 4" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="Addr5" DataIndex="Addr5" Header="Addr Line 5" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="HomePhone" DataIndex="HomePhone" Header="Home Phone" Width="80">
                        </ext:Column>
                        <ext:Column ColumnID="WorkPhone" DataIndex="WorkPhone" Header="Work Phone" Width="80">
                        </ext:Column>
                        <ext:Column ColumnID="Mobile" DataIndex="Mobile" Header="Mobile" Width="80">
                        </ext:Column>
                        <ext:Column ColumnID="AustPostcode" DataIndex="AustPostcode" Header="Aust Postcode"
                            Width="95" Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="Citizenship" DataIndex="Citizenship" Header="Citizenship" Width="150">
                        </ext:Column>
                        <ext:Column ColumnID="CitizenshipStatus" DataIndex="CitizenshipStatus" Header="Citizenship Status">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <KeyMap>
                    <ext:KeyBinding>
                        <Keys>
                            <ext:Key Code="DELETE" />
                        </Keys>
                        <Listeners>
                            <Event Handler="deleteRows(#{grdMain});" />
                        </Listeners>
                    </ext:KeyBinding>
                </KeyMap>
                <Listeners>
                    <RowDblClick Handler="this.getSelectionModel().selectRow(rowIndex); viewWinDetail(#{grdMain});" />
                    <RowContextMenu Handler="e.preventDefault(); #{RowContextMenu}.dataRecord = this.store.getAt(rowIndex);#{RowContextMenu}.showAt(e.getXY());this.getSelectionModel().selectRow(rowIndex);" />
                </Listeners>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                        <HeaderRows>
                            <ext:HeaderRow>
                                <Columns>
                                    <ext:HeaderColumn AutoWidthElement="false">
                                        <Component>
                                            <ext:CompositeField runat="server">
                                                <Items>
                                                    <ext:Button runat="server" Icon="Find">
                                                        <ToolTips>
                                                            <ext:ToolTip ID="ToolTip3" runat="server" Html="Apply filter" />
                                                        </ToolTips>
                                                        <Listeners>
                                                            <Click Handler="applyFilter();" />
                                                        </Listeners>
                                                    </ext:Button>
                                                    <ext:Button runat="server" Icon="Cancel">
                                                        <ToolTips>
                                                            <ext:ToolTip ID="ToolTip4" runat="server" Html="Clear filter" />
                                                        </ToolTips>
                                                        <Listeners>
                                                            <Click Handler="clearFilter(null);" />
                                                        </Listeners>
                                                    </ext:Button>
                                                </Items>
                                            </ext:CompositeField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField runat="server" ID="nfStudentId" MaxLength="10">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfProjectId" runat="server" EnableKeyEvents="true" MaxLength="18">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtLocationId" runat="server" MaxLength="3">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:ComboBox runat="server" ID="cboSex" SelectedIndex="0">
                                                <Items>
                                                    <ext:ListItem Text="None" />
                                                    <ext:ListItem Text="Male" Value="true" />
                                                    <ext:ListItem Text="Female" Value="false" />
                                                </Items>
                                            </ext:ComboBox>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:DateField ID="dfBirthDt" runat="server" Editable="true">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:DateField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtHomeLang" runat="server" EnableKeyEvents="true" MaxLength="30">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtSurName" runat="server" EnableKeyEvents="true" MaxLength="50">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtGivenName" runat="server" EnableKeyEvents="true" MaxLength="50">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfCourseId" runat="server" EnableKeyEvents="true" MaxLength="4">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtCourseTitle" runat="server" EnableKeyEvents="true" MaxLength="50">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfComYr" runat="server" EnableKeyEvents="true" MaxLength="4">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfUaiYr" runat="server" EnableKeyEvents="true" MaxLength="4">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfUai" runat="server" EnableKeyEvents="true" MaxLength="3">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfGpa" runat="server" EnableKeyEvents="true" MaxLength="1">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfCreditPass" runat="server" EnableKeyEvents="true" MaxLength="3">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtEmailAddr" runat="server" EnableKeyEvents="true" MaxLength="50">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtAddr1" runat="server" EnableKeyEvents="true" MaxLength="200">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtAddr2" runat="server" EnableKeyEvents="true" MaxLength="200">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtAddr3" runat="server" EnableKeyEvents="true" MaxLength="200">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtAddr4" runat="server" EnableKeyEvents="true" MaxLength="200">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtAddr5" runat="server" EnableKeyEvents="true" MaxLength="200">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtHomePhone" runat="server" EnableKeyEvents="true" MaxLength="20">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtWorkPhone" runat="server" EnableKeyEvents="true" MaxLength="20">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtMobile" runat="server" EnableKeyEvents="true" MaxLength="20">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:NumberField ID="nfAustPostcode" runat="server" EnableKeyEvents="true" MaxLength="4">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:NumberField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtCitizenship" runat="server" EnableKeyEvents="true" MaxLength="30">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="txtCitizenshipStatus" runat="server" EnableKeyEvents="true" MaxLength="20">
                                                <Listeners>
                                                    <SpecialKey Fn="KeyEnterFind" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                </Columns>
                            </ext:HeaderRow>
                        </HeaderRows>
                    </ext:GridView>
                </View>
                <BottomBar>
                    <ext:PagingToolbar ID="paddingBar" StoreID="storeMain" runat="server" PageSize="50"
                        DisplayInfo="true" ActiveIndex="0" AutoDataBind="True">
                    </ext:PagingToolbar>
                </BottomBar>
                <LoadMask ShowMask="true" />
            </ext:GridPanel>
        </Items>
    </ext:Viewport>
    <uc:WindowEditor ID="WindowEditor" runat="server" />
    <ext:Menu ID="RowContextMenu" runat="server">
        <Items>
            <ext:MenuItem ID="mnDelete" runat="server" Text="Delete" Icon="Delete">
                <Listeners>
                    <Click Handler="deleteRows(#{grdMain});" />
                </Listeners>
            </ext:MenuItem>
            <ext:MenuItem ID="mnEdit" runat="server" Text="View" Icon="TableEdit">
                <Listeners>
                    <Click Handler="viewWinDetail(#{grdMain});" />
                </Listeners>
            </ext:MenuItem>
        </Items>
    </ext:Menu>
    </form>
</body>
</html>
